<template>
  <div class="dashboard-container">
    <main>
      <el-table :data="tableData">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column prop="roleId" label="角色">
          <template slot-scope="scope">
            <span v-for="user in scope.row.roleId">
              {{ "[" + filterUser(options, user) + "]" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="toperMission(scope.row)"
              type="primary"
              size="small"
              >角色绑定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <el-dialog
      title="新增角色"
      :visible="visible"
      :before-close="cancel"
      width="30%"
    >
      <el-input v-model="name" placeholder="请输入角色名"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="角色绑定"
      :visible="pmvisible"
      :before-close="pmCancel"
      width="40%"
    >
      <el-transfer
        :titles="['未分配角色', '已分配角色']"
        v-model="value"
        :data="permissions"
        @change="change"
      ></el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pmCancel">取 消</el-button>
        <el-button type="primary" @click="pmConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  createRole,
  assignPermissions,
  getPermissionsOptions,
  getRoleList,
} from "@/api/role";
import { getUserList, getInfoNew, getAssignRoles } from "@/api/user";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  components: {},
  data() {
    return {
      visible: false,
      pmvisible: false,
      pmname: "",
      searchFrom: {
        currentPage: 1,
        pageSize: 100,
      },
      assignpermissionForm: {
        employeeId: "",
        assignedIds: [], //勾选的权限
        unassignedIds: [], //取消勾选的权限
      },
      permissions: [],
      value: [],
      options: [],
      tableData: [],
    };
  },
  mounted() {
    this.getUserList();
    this.getRoleList();
  },
  methods: {
    getRoleList() {
      getRoleList(this.searchFrom).then((res) => {
        this.options = res.data;
      });
    },
    getUserList() {
      getUserList(this.searchFrom).then((res) => {
        this.tableData = res.data;
      });
    },
    filterUser(options, userId) {
      const selectOptions = options.filter((elem) => elem.id == userId);
      return selectOptions[0]?.name || "";
    },
    toAdd() {
      this.visible = true;
    },
    toEdit(row) {
      this.editID = row.id;
      console.log(row);
      this.title = "编辑";
      this.visible = true;
    },
    toperMission(row) {
      this.assignpermissionForm.employeeId = row.id;
      this.pmvisible = true;
      getInfoNew({ employeeId: row.id }).then((res) => {
        console.log(res);
        res.data.roles.forEach((element) => {
          let obj = {
            key: element.id,
            label: element.name,
          };
          this.permissions.push(obj);
        });
        this.value = res.data.assignedRoleIds;
      });
    },
    cancel() {
      this.visible = false;
    },
    pmCancel() {
      this.pmvisible = false;
    },
    pmConfrim() {
      this.pmvisible = false;
      console.log(this.value);
      this.getUserList();
    },
    onSubmit() {
      console.log(this.searchFrom);
    },
    change(a, b, c) {
      console.log(a, b, c);
      if (b == "right") {
        this.assignpermissionForm.assignedIds = c;
      } else if (b == "left") {
        this.assignpermissionForm.unassignedIds = c;
      }
      getAssignRoles(this.assignpermissionForm).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "角色分配成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
